<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>刘含echarts练习</title>
    <style>
        #myfirstEcharts {
            margin: 50px auto;
            width: 1000px;
            height: 600px;
        }
    </style>
    <script src="echarts.min.js"></script>
</head>

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="myfirstEcharts">

    </div>
    <script>
        //基于准备好的Dom,初始化echarts实例
        var a = document.querySelector('#myfirstEcharts'); console.log(a);
        var myfirstEcharts = echarts.init(a);


        //指定图表的配置项和数据
        var option = {
            title: {
                text: "Hubary的第一个echarts图表",
                subtext: '轩辕剑之汉之云'
            },
            dataZoom: [
                {
                    type: 'slider',
                    /* start: 10,
                    end: 65 */
                }
            ],
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: { readOnly: false },
                    magicType: { type: ['line', 'bar'] },
                    restore: {},
                    saveAsImage: {}
                }
            },
            tooltip: {},
            legend: {
                data: ['年龄', '身高', '体重']
            },
            xAxis: {
                data: ['张佳宁','李易峰','刘含','沈文芳','张雷雨','张三丰','黄晓明','关晓彤']
            },
            yAxis: {},
            series: [{
                name: '年龄',
               
                type: 'bar',
                data: [26,31,26,22,27,107,42,22]
            }, {
                name: '身高',
                type: 'bar',
                data: [168,170,175,166,170,156,186,173]
            }, {
                name: '体重',
                type: 'bar',
                data: [53,65,59,55,65,66,67,53]
            }]
        };

        myfirstEcharts.setOption(option);







    </script>
</body>

</html>